<template>
  <div class="dashboard-container">
    <div>
      <div id="hdl"></div>
      <span>{{ data[0].name }}</span>
    </div>
    <div>
      <div id="hsl"></div>
      <span>{{ data[1].name }}</span>
    </div>
    <div>
      <div id="dpfl"></div>
      <span>{{ data[2].name }}</span>
    </div>
  </div>
</template>

<script>
import { currentGET } from "api/modules";

export default {
  data() {
    return {
      data: [
        { name: "耗电量", value: 24000 },
        { name: "耗水量", value: 6400 },
        { name: "碳排放量", value: 1291200 }
      ]
    };
  },
  mounted() {
    currentGET("big1")
      .then(res => {
        this.initCharts();
        this.initCharts2();
        this.initCharts3();
      })
      .catch(error => {
        console.error("请求出错:", error);
      });
  },
  methods: {
    initCharts() {
      const hdlElement = document.getElementById("hdl");
      const myChart = echarts.init(hdlElement);
      const option = {
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%"
        },
        series: [
          {
            name: "Pressure",
            type: "gauge",
            progress: {
              show: true
            },
            itemStyle: {
              color: "pink",
            },
            max: 30000,
            data: [
              {
                value: this.data[0].value,
                name: this.data[0].name
              }
            ],
            axisLine: {
              roundCap: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    initCharts2() {
      const hslElement = document.getElementById("hsl");
      const myChart2 = echarts.init(hslElement);
      const option = {
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%"
        },
        series: [
          {
            name: "Pressure",
            type: "gauge",
            progress: {
              show: true
            },
            max: 30000,
            data: [
              {
                value: this.data[1].value,
                name: this.data[1].name
              }
            ],
            axisLine: {
              roundCap: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            }
          }
        ]
      };
      myChart2.setOption(option);
    },
    initCharts3() {
      const dpflElement = document.getElementById("dpfl");
      const myChart3 = echarts.init(dpflElement);
      const option = {
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%"
        },
        series: [
          {
            name: "Pressure",
            type: "gauge",
            progress: {
              show: true
            },
            max: 30000,
            data: [
              {
                value: this.data[2].value,
                name: this.data[2].name
              }
            ],
            itemStyle: {
              color: "orange"
            },
            axisLine: {
              roundCap: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            }
          }
        ]
      };
      myChart3.setOption(option);
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  display: flex;
  justify-content: space-around;
}
#hdl {
  width: 150px;
  height: 150px;
}
#hsl {
  width: 150px;
  height: 150px;
}
#dpfl {
  width: 150px;
  height: 150px;
}
span{
  margin-left: 45px;
}
</style>    